<template>
	<view class="content">
		<Loading :show="loading"></Loading>
		<view v-show="!loading">
		<view class="content-top">
			<!-- <experts ref="dropdown"></experts> -->
		</view>

		<!-- <view style="height:90rpx"></view> -->

		<view class="curtain" v-show="curtain_show" v-on:click="curtain_show_change"></view>
    
		<view  class="content-part" v-for="(item,index) in sourceData" :key="index" >
			
			<u-image @click="imagesBig(imgUrl(item.avatar?item.avatar:'/images/adminImg/avatar.png'))" height="110rpx" width="110rpx" shape="circle" mode="scaleToFill" :src="imgUrl(item.avatar?item.avatar:'/images/adminImg/avatar.png')"></u-image>
			<view class="content-part-center" @click="next(item.id)">
				<view class="content-part-name">{{checkField(item.realName)?item.realName:item.nickName}}</view>
				<view  class="marginTop"> 
					<u-tag :text="'优秀经纪人'" type="success" size="mini" border-color="white"/>
				</view>
				<view class="content-part-center-bottom marginTop">
					格子空间-找商办
				</view>
			</view>
			
			<view class="content-part-right" @click="next(item.id)">
				<text class="font">{{item.fixtureNumber}}</text>
				<text class="small">拥有房源(套)</text>
			</view>
			
		</view>
      </view>
	</view>
</template>

<script>
	import experts from "@/components/experts/experts"
	import { expertsList } from "@/services/admins.js"
	import Loading from "@/components/loading/loading.vue"
	export default {
		components: {
			experts,
			Loading
		},
		data() {
			return {
				curtain_show: false,
				loading:true,
				sourceData: [{
						'image': '/images/adminImg/avatar.png',
						'name': 'XXX',
						tag: '优秀经纪人',
						company: '格子空间-博爱路三路36号之一5层',
						fixtureNumber: 119
					},
					{
						'image': '/images/adminImg/avatar.png',
						'name': 'XX',
						tag: '优秀经纪人',
						company: '格子空间-博爱路三路36号之一5层',
						fixtureNumber: 58
					},
					// {
					// 	'image': '/images/adminImg/avatar.png',
					// 	'name': '找商办',
						// tag: '店长',
					// 	company: '格子空间-博爱路三路36号之一5层',
					// 	fixtureNumber: 65
					// },
				]
			}
		},
		created() {
			this.expertsListLoad()
		},
		methods: {
			curtain_show_change() {
				this.$refs.dropdown.showList = ''
			},
			async expertsListLoad(){
				this.loading = true
				let res  = await expertsList()
				if(res.code == 200){
					this.sourceData = res.data
				}
				this.$nextTick(()=>{
					this.loading = false
				})
			},
			next(id){
				uni.navigateTo({
					url:'./Content?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		position: relative;

		.content-top {
			background: white;
			position: fixed;
			top: 0;
			z-index: 2;
			width: 100%;
		}

		.curtain {
			width: 100%;
			min-height: 100vh;
			height: 100%;
			position: absolute;
			top: 0;
			background: black;
			opacity: 0.5;
			z-index: 1;
		}

		.content-part {
			width: 100%;
			display: flex;
			height: 220rpx;
			background: white;
			// justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			padding-left: 20rpx;
            padding-right: 20rpx;
			.content-part-center{
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				margin-left: 20rpx;
				height: 80%;
				// border: 1rpx solid red;
				flex:1;
				.content-part-name{
					font-size: 30rpx;
					font-weight: bold;
				}
				.marginTop{
					margin-top: 15rpx;
				}
				.content-part-center-bottom{
					font-size: 26rpx;
				}
			}
			.content-part-right {
				display: flex;
				flex-direction: column;
				border-left: 1rpx solid #f1f1f1;
				align-items: center;
				padding-left:30rpx;
				.font{
					color:#DD524D;
					font-size:35rpx;
					font-weight: bold;
				}
				.small{
					font-size: 22rpx;
					margin-top: 10rpx;
					color: #b9b9b9;
				}
			}
		}

	}
</style>
